<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // 异步:一边听歌，一边撸代码   互不影响

        // 同步: 先烧水，后泡茶        顺序执行


        // js: 同步编程语言   --- 单线程的语法 
        //   js操作DOM(标签和css)  --- 这就决定了js只能是一个单线程的语言


        // 单线程    一次只做一件事情

        // 多线程    一次可以多件事情


        // var a = 1 ;
        // console.log(a) ;
        // a = 2 ;
        // console.log(a) ;

        // 预编译的存在不影响js的同步性 


        //  异步：
        //     事件处理函数
        //     定时器
        //     ajax


        // js代码的执行顺序
        //   1 遇到同步代码，立即在主线程上执行
        //   2 遇到异步代码，放在一边(存在任务队列)
        //   3 等到所有的同步代码执行完毕(主线程的任务都执行完毕) 
        //   4 当异步任务到时间了 ，也不会执行，等到主线程清空，再把到时间的异步任务放在主线程上执行(异步不会排队)

        //   5 异步任务执行的时候，主线程上会出现新的同步代码,1 2 3 4

        // event loop  事件循环
 

        // 页面一打开的时候就会绑定onclick 
        // 等到将来点击的时候才会执行函数里面的代码
        document.onclick = function() {
            // 点击之后才会执行
            console.log(666) ;
        }

        console.log(777) ;


        setTimeout(function(){
            setTimeout(function() {
                console.log(10) ;
            } , 0)
            console.log(888) ;
        } , 3000)

        console.log(999) ;


        // for(var i = 0 ; i < 10 ; i++) {
        //     console.log(i) ;   // 0-9
        // }

        for(var i = 0 ; i < 10 ; i++) {
            
            setTimeout(function() {
                console.log(i) ;
            } , 0)
            console.log(i) ; 
        }

        // var i = 0 ;


        // if(i < 10) {
        //     setTimeout(function() {
        //         console.log(i) ;
        //     } , 0)
        // }

        // i++ ;

        //  if(i < 10) {
        //     setTimeout(function() {
        //         console.log(i) ;
        //     } , 0)
        // }

        // i++ ;

        // if(i < 10) {
        //     setTimeout(function() {
        //         console.log(i) ;
        //     } , 0)
        // }

        // i++ ;

        // if(i < 10) {
        //     setTimeout(function() {
        //         console.log(i) ;
        //     } , 0)
        // }

        // i++ ;


    </script>
    
</body>
</html>